<template>
    <div class="system-messagelog-container layout-padding">
        <el-card shadow="hover" class="layout-padding-auto">

            <div class="table-search-container">
                <el-form ref="tableSearchRef" :model="state.ruleForm" size="default" label-width="120px" class="table-form">
                    <el-row>




                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                            <el-form-item label="接收人">
                                <el-input v-model="state.ruleForm.to" style="width: 100%" placeholder="接收人"></el-input>
                            </el-form-item>
                        </el-col>


                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
                            <el-form-item label="发送人">
                                <el-input v-model="state.ruleForm.sender" style="width: 100%" placeholder="发送人"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
                            <el-form-item label="模板名称">
                                <el-input v-model="state.ruleForm.templateCode" style="width: 100%"
                                    placeholder="模板名称"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
                            <el-form-item label="主题">
                                <el-input v-model="state.ruleForm.subject" style="width: 100%" placeholder="主题"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
                            <el-form-item label="服务名称">
                                <el-input v-model="state.ruleForm.serviceName" style="width: 100%"
                                    placeholder="服务名称"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
                            <el-form-item label="消息内容">
                                <el-input v-model="state.ruleForm.content" style="width: 100%"
                                    placeholder="消息内容"></el-input>
                            </el-form-item>
                        </el-col>




                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
                            <el-form-item label="发送结果">
                                <el-select v-model="state.ruleForm.result" placeholder="请选择" clearable allow-create
                                    filterable style="width: 100%">
                                    <el-option v-for="i in state.resultSelect" :key="i.value" :label="i.label"
                                        :value="i.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
                            <el-form-item label="消息类型">
                                <el-select v-model="state.ruleForm.type" placeholder="请选择" clearable allow-create filterable
                                    style="width: 100%">
                                    <el-option v-for="i in state.typeSelect" :key="i.value" :label="i.label"
                                        :value="i.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
                            <el-form-item label="发送日期">
                                <el-date-picker v-model="state.ruleForm.sendDate" type="datetimerange"
                                    :picker-options="state.pickerOptions" range-separator="至" start-placeholder="开始日期"
                                    end-placeholder="结束日期" align="right">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>


                        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item class="table-form-btn" :label-width="!state.isToggle ? '10px' : '35px'">
                                <div class="table-form-btn-toggle ml10" @click="state.isToggle = !state.isToggle">
                                    <span>{{ state.isToggle ? '收筛选' : '展筛选' }}</span>
                                    <SvgIcon :name="state.isToggle ? 'ele-ArrowUp' : 'ele-ArrowDown'" />
                                </div>
                                <div>
                                    <el-button size="default" type="primary" @click="refresh()">查询
                                    </el-button>
                                    <el-button size="default" type="info" class="ml10" @click="handleResetSearch()"> 重置
                                    </el-button>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>




            <el-card shadow="hover" class="layout-padding-auto">
                <el-table size="default" :data="state.tableData" style="width: 100%">
                    <el-table-column align="center" label="接收人" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.to }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="发送人" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.sender }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="模板名称" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.templateCode }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="服务名称">
                        <template #default="scope">
                            <span>{{ scope.row.serviceName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="邮件抄送">
                        <template #default="scope">
                            <span>{{ scope.row.cc }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="邮件密送">
                        <template #default="scope">
                            <span>{{ scope.row.bcc }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="主题">
                        <template #default="scope">
                            <span>{{ scope.row.subject }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="消息内容" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.content }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="发送结果">
                        <template #default="scope">
                            <template v-if="scope.row.result == 'success'">
                                <el-tag type="success">{{ scope.row.result }}</el-tag>
                            </template>
                            <template v-if="scope.row.result != 'success'">
                                <el-tag type="danger">{{ scope.row.result }}</el-tag>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="消息类型">
                        <template #default="scope">
                            <el-tag type="info">{{ scope.row.type }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="发放日期">
                        <template #default="scope">
                            <span>{{ formatDate(new Date(scope.row.sendDate), "YYYY-mm-dd HH:MM:SS") }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>

            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.ruleForm.page" background
                v-model:page-size="state.ruleForm.limit" layout="total, sizes, prev, pager, next, jumper"
                :total="state.ruleForm.total">
            </el-pagination>
        </el-card>


    </div>
</template>

<script setup lang="ts" name="messageLog">

import { formatDate } from '/@/utils/formatTime';
import { reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';



// 导入接口
import { useSysApi } from "../../../api/sys";





const state = reactive({
    isToggle: false,
    tableData: [],
    ruleForm: {
        page: 1,
        limit: 10,
        total: 0,
        to: "",
        sender: "",
        templateCode: '',
        subject: "",
        serviceName: "",
        content: "",
        result: "",
        type: "",
        sendDate: [],
        sorts: {}
    },
    resultSelect: [{
        label: 'success',
        value: 'success'
    }, {
        label: 'fail',
        value: 'fail'
    }], typeSelect: [{
        label: 'SMS',
        value: 'SMS'
    }, {
        label: 'EMAIL',
        value: 'EMAIL'
    }, {
        label: '其它',
        value: '其它'
    }],
    pickerOptions: {
        shortcuts: [
            {
                text: "最近一周",
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(
                        start.getTime() - 3600 * 1000 * 24 * 7
                    );
                    picker.$emit("pick", [start, end]);
                },
            },
            {
                text: "最近一个月",
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(
                        start.getTime() - 3600 * 1000 * 24 * 30
                    );
                    picker.$emit("pick", [start, end]);
                },
            },
            {
                text: "最近三个月",
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(
                        start.getTime() - 3600 * 1000 * 24 * 90
                    );
                    picker.$emit("pick", [start, end]);
                },
            },
        ],
    },
});

const handleResetSearch = () => {
    state.ruleForm = {
        page: 1,
        limit: 10,
        total: 0,
        to: "",
        sender: "",
        templateCode: '',
        subject: "",
        serviceName: "",
        content: "",
        result: "",
        type: "",
        sendDate: [],
        sorts: {}
    };
    queryMessageLog();
}


const refresh = () => {
    queryMessageLog();
}


// 分页改变
const onHandleSizeChange = (val: number) => {
    state.ruleForm.limit = val;
    queryMessageLog();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
    state.ruleForm.page = val;
    queryMessageLog();
};


const queryMessageLog = async () => {
    try {
        let vo = {
            page: state.ruleForm.page,
            limit: state.ruleForm.limit,
        };
        if (state.ruleForm.to) vo["to"] = state.ruleForm.to;
        if (state.ruleForm.sender) vo["sender"] = state.ruleForm.sender;
        if (state.ruleForm.templateCode) vo["templateCode"] = state.ruleForm.templateCode;
        if (state.ruleForm.subject) vo["subject"] = state.ruleForm.subject;
        if (state.ruleForm.serviceName) vo["serviceName"] = state.ruleForm.serviceName;
        if (state.ruleForm.content) vo["content"] = state.ruleForm.content;
        if (state.ruleForm.result) vo["result"] = state.ruleForm.result;
        if (state.ruleForm.type) vo["type"] = state.ruleForm.type;
        if (state.ruleForm.sendDate && state.ruleForm.sendDate.length > 0) vo["sendDate"] = state.ruleForm.sendDate;
        if (sortsStr()) vo["sorts"] = sortsStr();

        let listTemp = await useSysApi().queryMessageLog(
            vo
        );

        state.ruleForm.total = listTemp.total;
        state.tableData = listTemp.list;


    } catch (error: any) {
        ElMessage.error(error.msg);
    }
}


const sortsStr = () => {
    let result = "";
    for (var prop in state.ruleForm.sorts) {
        result +=
            prop +
            (state.ruleForm.sorts[prop] == "descending" ? " desc," : " asc,");
    }
    if (result == "") {
        return null;
    }
    return result.substring(0, result.length - 1);
}


// 页面加载时
onMounted(() => {
    queryMessageLog();
});




</script>




<style scoped lang="scss">
// .el-form .el-form-item:last-of-type {
//     margin-bottom: 22px !important;
// }


.system-messagelog-container {
    :deep(.el-card__body) {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;

        .el-table {
            flex: 1;
        }
    }
}

.bar_btn_div {
    display: flex;
    padding: 20px;
    border: 1px solid #ebeef5;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px 5px 0px 0px;

    .title_div {
        display: flex;
        font-size: 16px;

        &>div {
            margin-right: 10px;
        }
    }
}

.search_div {
    border: 1px solid #ebeef5;
    border-top: 0px;
    border-radius: 0px 0px 5px 5px;
    padding: 20px;
    padding-bottom: 0px;
}


.table-search-container {
    display: flex;

    .table-form {
        flex: 1;

        .table-form-btn-toggle {
            white-space: nowrap;
            user-select: none;
            display: flex;
            align-items: center;
            color: var(--el-color-primary);
            margin-right: 15px;
        }
    }
}
</style>
